<template>
	<view class="list">
		<scroll-view class="list_wraper" scroll-y="true" :scroll-into-view="viewIndex" scroll-with-animation="true">
			<view class="data" v-for="(item, index) in list" :key="index" :id="'letter' + item.letter">
				<view class="title" v-show="item.list.length && !keyword">{{ item.letter }}</view>
				<view class="item" v-for="(station, index2) in item.list" :key="index2" v-show="filter(station)" @click.stop="selectedItem(station)">{{ station.stationName }}</view>
			</view>
			<view class="no_filter" v-if="!searchResult">
				<image class="img" src="../../static/images/pic_zwcc.png"></image>
				<view class="tip">
					<text class="tip1">暂未查到该车站</text>
					<text class="tip2">输入其他内容检索</text>
				</view>
			</view>
		</scroll-view>
		<view class="letter_wraper" v-show="!keyword">
			<view class="letter_item" v-for="(item, index) in letters" v-if="list[index].list.length" :key="item" @click.stop="clickQuickIndex(index)">{{ item }}</view>
		</view>
	</view>
</template>

<script>
// utils
import { formatDataForIndex } from '../../utils/utils.js';
export default {
	props: {
		data: {
			// 数据
			type: Array,
			default: function() {
				return [];
			}
		},
		keyword: {
			// 默认文案
			type: String,
			default: ''
		}
	},
	data() {
		return {
			letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			viewIndex: '',
			searchResult: true,
			list: []
		};
	},
	watch: {
		keyword(val, oldval) {
			const data = this.data;
			const len = data.length;
			for (let i = 0; i < len; i++) {
				let item = data[i];
				const result = item.stationName.indexOf(val) != -1 || item.pyName.indexOf(val) != -1 || item.pyNameShort.indexOf(val) != -1;
				if (result) {
					this.searchResult = true;
					return;
				} else {
					this.searchResult = false;
				}
			}
		}
	},
	methods: {
		// 点击索引
		clickQuickIndex(index) {
			const letter = 'letter' + this.letters[index];
			// 设置viewIndex值，使聊天滚动到底部
			this.$nextTick(() => {
				this.viewIndex = letter;
			});
		},
		// 检索过滤显示
		filter(station) {
			const keyword = this.keyword;
			const filter = station.stationName.indexOf(keyword) != -1 || station.pyName.indexOf(keyword) != -1 || station.pyNameShort.indexOf(keyword) != -1;
			return filter;
		},
		// 选择列表项
		selectedItem(item) {
			this.$emit('selected', item);
		}
	},
	mounted() {
		this.list = formatDataForIndex(this.data);
	}
};
</script>

<style lang="scss" scoped>
.list {
	position: relative;
	background: #ffffff;
	.list_wraper {
		height: 100vh;
		.data {
			.title {
				padding: 0 30rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: rgba(244, 246, 249, 1);
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}
			.item {
				padding: 0 30rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #d1d7e1;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 28rpx;
				font-weight: 600;
				color: rgba(51, 51, 51, 1);
			}
			.item:last-child {
				border: none;
			}
		}
		.no_filter {
			display: flex;
			.img {
				width: 248rpx;
				height: 200rpx;
			}
			.tip {
				font-size: 28rpx;
				font-weight: bold;
				color: rgba(51, 51, 51, 1);
				height: 200rpx;
				.tip1,
				.tip2 {
					display: block;
				}
				.tip1 {
					padding: 58rpx 0 32rpx 0;
				}
				.tip2 {
					padding-bottom: 58rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(130, 141, 162, 1);
				}
			}
		}
	}
	.letter_wraper {
		z-index: 999;
		text-align: right;
		position: fixed;
		right: 0rpx;
		top: 200rpx;
		.letter_item {
			font-size: 20rpx;
			font-weight: 600;
			font-family:PingFang SC;
			color: rgba(25, 102, 255, 1);
			line-height: 48rpx;
			padding: 0 25rpx 0 20rpx;
		}
	}
}
</style>
